<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>WebSocket Chat</title>
</head>
<body>
<script>
    var socket;
    var userId;

    // 判断当前浏览器是否支持websocket
    if (window.WebSocket) {
        // go on
    } else {
        alert("当前浏览器不支持websocket");
    }

    // 添加建立连接的函数
    function openConnection() {
        if (!window.socket || socket.readyState == WebSocket.CLOSED) {
            socket = new WebSocket("ws://localhost:9022/hello");
            // 相当于channelRead0， ev收到服务器端会送的消息
            socket.onmessage = function (ev) {
                var rt = document.getElementById("responseText");
                // rt.value = rt.value + "\n" + ev.data;

                var data = JSON.parse(ev.data);
                if (data.type === "connect") {
                    userId = data.userId;
                    rt.value = rt.value + "\n" + "连接成功，你的账号为：" + userId;
                } else if (data.type === "message") {
                    rt.value = rt.value + "\n" + data.message;
                }

            };
            // 相当于连接开启
            socket.onopen = function () {
                var rt = document.getElementById("responseText");
                rt.value = "连接开启了";
                // 发送请求获取用户账号
                socket.send(JSON.stringify({
                    type: "requestUserId"
                }));
            };
            // 感知连接关闭
            socket.onclose = function (ev) {
                var rt = document.getElementById("responseText");
                rt.value = rt.value + "\n" + "连接关闭了";
            };
        } else {
            alert("连接已经开启");
        }
    }



    function send(message) {
        if (!window.socket) { // 先判断socket是否创建好
            return;
        }
        if (socket.readyState == WebSocket.OPEN) {
            var receiver = prompt("请输入接收者的用户ID:");
            if (!receiver) {
                alert("接收者用户ID不能为空");
                return;
            }
            // 通过socket，发送消息
            socket.send(JSON.stringify({
                type: "message",
                sender: userId,
                receiver: receiver,
                message: message
            }));
        } else {
            alert("连接没有开启");
        }
    }

    // 添加关闭连接的函数
    function closeConnection() {
        if (socket && socket.readyState == WebSocket.OPEN) {
            socket.close();
        } else {
            alert("连接已经关闭或未开启");
        }
    }
</script>
<form onsubmit="return false">
    <textarea name="message" style="height: 150px; width: 1000px"></textarea>
    <!-- 添加建立连接的按钮 -->
    <input type="button" value="建立连接" onclick="openConnection()">
    <input type="button" value="发送消息" onclick="send(this.form.message.value)">
    <br />
    <textarea id="responseText" style="height: 150px; width: 1000px"></textarea>
    <input type="button" value="清空内容" onclick="document.getElementById('responseText').value=''">
    <!-- 添加关闭连接的按钮 -->
    <input type="button" value="关闭连接" onclick="closeConnection()">
</form>
</body>
</html>
